<template>
	<view class="content">
		<!-- 播放器 -->
		<MusicPlayer ref="player" ></MusicPlayer>
		<!-- 登录界面 -->
		<LoginView ref="loginView"></LoginView>
		<!-- 修改个人信息 -->
		<view v-if="isUpdate" class="info_update">
			<text class="text_right update_close block_top" @click="isUpdate = false">✖️</text>
			<view  class="top">名称<input type="text" v-model="updateUserInfo.userName" /></view>
			<view class="top">密码<input type="text" v-model="updateUserInfo.password" /></view>
			<view class="top bottom">
				<button @click="updateUser" class="top update_head bottom">确认修改</button>
			</view>
		</view>
		<view></view>
		<!-- 搜索框 -->
		<Search class="top"></Search>
		<!-- 信息块 -->
		<view class="head_block top">
				<image class="head_img top bottom" :src="user.img == '' ? '/static/img/defaultHeadImg.svg' : user.img"></image>
				<view class="head_block_text top bottom">
					<text v-if="isLogin" class="head_name">{{user.name == '' ? '秋月' : user.name}}</text>
					<!-- 登录按钮 -->
					<text v-if="!isLogin" @click="showLogin" class="head_name login_botton text_center">去登陆</text>
					<text class="head_detail">{{user.welcome}}</text>
				</view>
				<view v-if="isLogin" class="head_other bottom">
					<!-- <view class="head_button text_center" @click="getImageList">🔀随机资料</view> -->
					<view @click="isUpdate = true" class="head_button text_center">📒修改资料</view>
					<view @click="logout" class="head_button text_center">🤜退出登录</view>
				</view>
		</view>
		<!-- 收藏图标 -->
		<view v-if="false" class="center_block top">
				<view class="center_content_block">
					<text class="center_emoji"">❤️️</text>
					<text class="center_emoji_text">收藏</text>
				</view>
				<view class="center_content_block">
					<text class="center_emoji"">📂️️</text>
					<text class="center_emoji_text">本地</text>
				</view>
				<view class="center_content_block">
					<text class="center_emoji">🌏️️️</text>
					<text class="center_emoji_text">线索</text>
				</view>
		</view>
		<!-- 最近播放 -->
		<view class="current_block top">
			<view class="current_title bottom">最近播放 🛴</view>
			<view class="current_content block_bottom">
				<MusicList :list="recMusicList" :showDelete="true"></MusicList>
			</view>
		</view>
	</view>
</template>

<script>
	import MusicPlayer from '../../../component/MusicPlayer/MusicPlayer';
	import Search from '../../../component/Search/Search.vue';
	import MusicList from '../../../component/MusicList/MusicList.vue';
	import LoginView from '../../../component/LoginView/LoginView.vue';
	import user from '../../../common/api/user/user';
	import request from '../../../common/api/request';
	export default {
		created() {
			this.getOneTalk();
		},
		onShow() {
			// 登录后加载数据
			this.isLoginCheck();			
			this.recMusicList = this.$store.getters.getRecentlyMusic;
		},
		mounted() {
			this.$refs.player.getCurrentPalyer();
		},
		data() {
			return {
				// 图片上传组件参数
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				fileUrl:'',
				sourceType: ['album', 'camera'],
				// 用户信息
				isLogin: false,
				// 更改用户信息
				isUpdate: false,
				user:{
					img:'/static/img/defaultHeadImg.svg',
					name: '秋月',
					welcome: '',
				},
				updateUserInfo:{
					userName:'',
					password:'',
				},
				// 最近播放列表
				recMusicList:[
				],
			}
		},
		components: {
			Search,
			MusicList,
			LoginView,
			MusicPlayer
		},
		onReachBottom() {
			uni.showToast({
				title: '🥀已经到底了哦~',
				icon: 'none',
				duration: 500,
				position:"bottom"
			}) 
		},
		methods: {
			// 调用每日一言接口
			getOneTalk(){
				uni.request({
					url:  'https://tenapi.cn/v2/yiyan?format=json',
					type: "post",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						var msg = res.data.data.hitokoto;
						if (msg.length > 26) {
							msg = msg.substring(0,24 )+"...";
						}
						this.user.welcome = msg;
					}
				});
			},
			// 检查是否登录
			isLoginCheck(){
				this.user.isLogin = this.$store.getters.isLogin;
				this.user.img = this.$store.getters.getDefaultUser.img;
				return this.user.isLogin;
			},
			// 展示登录框
			showLogin(){
				this.$refs.loginView.showView();
			},
			// 登录成功后操作
			loginSuccess(){
				// 从store拉取用户信息
				if (this.$store.getters.isLogin){
					// 关闭去登录按钮
					this.isLogin = true;
					// 拉取用户信息
					this.getUserInfo();
				}
			},
			// 退出登录
			logout(){
				this.isLogin = false;
				this.user.img = "/static/img/defaultHeadImg.svg"
				this.user.name = "秋月";
				this.$store.commit('logOut');
				uni.showToast({
					title: '🌼 欢迎下次光临',
					icon: 'none',
					position:"center",
				})
			},
			// 拉取个人页面用户信息
			getUserInfo(){
				user.info()
				.then(res=>{
					if (res.data.img == null || res.data.img == ''){
						this.user.img = '';
					}else {
						this.user.img = request.getServerBasePath()+res.data.img;
					}
					if (this.user.name == null || this.user.name == ''){
						this.user.name = '';
					}else {
						this.user.name = res.data.name;
					}
					
				})
			},
			// 清空更新用户信息
			resetUpdateUser(){
				this.update_user = {
					userName:'',
					password:'',
				}
			},
			// 更新用户信息
			updateUser() {
				user.update(this.updateUserInfo).then(res=>{
					this.resetUpdateUser();
					this.getUserInfo();
					this.isUpdate = false;
				})
			},
		}
	}
</script>

<style>
	/* 资料css */
	.head_block{
		width: 90%;
		background-color: #fcfcfc;
		border-radius: 25px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}
	.head_img {
		width: 20%;
		height: 70px;
		border-radius: 50%;
	}
	.head_block_text{
		height: 70px;
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.head_name {
		font-size: 20px;
		font-weight: bold;
	}
	.head_detail {
		margin-top: 5px;
		height: 30px;
	}
	.head_other {
		width: 90%;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.head_button{
		width: 34%;
	}
	.head_button:active{
		border-left: 1px solid;
		border-bottom: 1px solid;
	}
	/* 收藏类css */
	.center_block {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.center_content_block{
		width: 34%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.center_emoji {
		font-size: 28px;
		word-break: break-all;
	}
	.center_emoji_text {
		text-align: center;
		font-size: 18px;
	}
	/* 最近播放 */
	.current_block {
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.current_title {
		width: 100%;
		font-size: 18px;
		text-align: left;
	}
	.current_content {
		width: 95%;
		display: flex;
	}
	.login_botton {
		width: 40%;
		padding: 8px;
		border-radius: 20px;
		background-color: #e8efc4;
	}
	/* 更新用户信息 */
	.info_update{
		border-radius: 20px;
		background-color: #fcfcfc;
		border: 2px solid #e8efc4;
		width: 80%;
		height: 35%;
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.info_update view{
		width: 80%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.info_update input{
		text-align: center;
		border-bottom: 2px solid #e8efc4;
		margin-left: 10px;
		width: 60%;
		height: 30px;
	}
	.upadate_img_up{
		text-align: center;
		color: #000000;
		font-weight: bold;
		border: 1px solid #e8efc4;
	}
	.update_close{
		/* 删除按钮 */
		width: 85%;
		text-align: right;
		margin-left: 10px;
		height: 30px;
	}
	.update_head{
		/* 上传头像css */
		font-size: 15px;
		width: 90px;
		height: 40px;
		border-bottom: 1px solid #e8efc4;
	}
	.update_img{
		width: 40px;
		height: 40px;
		border: 1px solid #e8efc4;
	}
</style>
